<template>
  <div id="" class="changeName">
    <h2 v-title="'验证码'"></h2>
    <h2>请输入6位验证码</h2>
    <div class="inputDiv">
      <p>已向{{mobile}}发送了一个验证码。请在下方消息框中输入验证码</p>
      <input type="text" name="" v-model="yzmCode" placeholder="请输入6位验证码"maxlength="6" v-on:input ="inputFunc">
    </div>

    <div class="fixedBottom">
      <button type="button" name="button" class="btn block mb10" v-if="isGetYzmTime">重新发送验证码({{yzmTime}}s)</button>
      <button type="button" name="button" class="btn block mb10" v-else @click="reGetYzm">重新发送验证码</button>
      <button type="button" name="button" class="blockBtn" @click="changePhone">下一步</button>
    </div>
    <comfirm-login
    :comfirmTitle="comfirmTitle" v-if="isWrong"
    @comfirmEvent="comfirmEvent"></comfirm-login>
  </div>
</template>
<script>
import comfirmLogin from '@/components/comfirm.vue';
import {Toast} from 'mint-ui';

export default {
  name: "",
  data: () => ({
    mobile:'',
    yzmCode:'',
    comfirmTitle:'',
    isWrong:false,
    isGetYzmTime:false,   //倒计时内不能重复点击获取验证码
    yzmTime:60,
  }),
  components: {
    comfirmLogin,
  },
  methods: {
    getYzm() {
      let that = this;
      let yzmParam = {
        mobile:that.mobile,
        pinType:4
      }
      network.get(configUrl.LOGINGETYZM_URL,yzmParam,function(res){
        console.log(res);
        Toast('验证码已发送到手机');
        that.yzmTime = 60;
        that.isGetYzmTime = true;

        let yzmInterval = setInterval(()=>{
          that.yzmTime --;
          if(that.yzmTime==0){
            that.isGetYzmTime = false;
            return false;
          }
        },1000);
      },function(err){
        console.log(err);
      });
    },
    // 监听验证码输入
    inputFunc() {
    //   console.log(this.yzmCode);
    //   let yzmCode = this.yzmCode;
    //   if(yzmCode.length==6){
    //     if(yzmCode!='666666'){    //暂时默认验证码666666
    //       this.isWrong = true;
    //       this.comfirmTitle = {
    //         comfirmTop:'提示',
    //         comfirmCon:'验证码错误',
    //         comfirmBtn:['取消','确认'],
    //       }
    //     }
    //   }
    },
    comfirmEvent(data) {    //验证码错误弹窗提示
      console.log(data);
      this.isWrong = false;
    },
    reGetYzm() {    //重新获取验证码
      this.getYzm();
    },
    changePhone() { //更换手机号，下一步验证码正确后才跳转
      let that = this;
      let yzmParam = {
        yzmCode:this.yzmCode,
        mobile:this.mobile,
        pinType:4,
      }
      network.post(configUrl.CHECKYZM_URL,yzmParam,function (res) {
        console.log(res);
        that.$router.push({name:'newPhone'});
      },function (error) {
        console.log(error);
      })

    }
  },
  mounted() {
    //do something after mounting vue instance
    // 获取换绑手机号验证码
    let mobile = this.$route.query.mobile;
    this.mobile = mobile;
    this.getYzm();
    this.$nextTick(()=>{
      console.log(this.yzmCode);
    })
  }
}
</script>
<style lang="scss" scoped src="./memberSetFile.scss"></style>
